@import "./_init_pubstyle.scss";
.cartsBody {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cartsBox {
    width: 84%;
    .cartsContent {
      width: 100%;
      .discountCoupon {
        margin: 10px 0px 10px 0px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        border: 1px solid #eaeaea;

        .discounts {
          width: 200px;
          height: 40px;
          display: flex;
          .disImg {
            width: 30px;
            height: 40px;
            background-color: rgb(204, 152, 152);
            margin-left: 20px;
          }
          .disCop {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            text-indent: 10px;
          }
        }
        .getCoupon {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          background-color: #e36844;
          cursor: pointer;
          position: relative;
          span {
            display: inline-block;
            width: 20px;
            height: 20px;
            position: absolute;
            right: 4px;
            top: 11px;
            background: url(../img/jiantouxiangxia.png) no-repeat 50%;
          }
        }
      }
      .optAll {
        width: 100%;
        height: 40px;
        border: 1px solid #eaeaea;
        display: flex;
        align-items: center;
        .allInfor {
          width: 100%;
          display: flex;
          align-items: center;
          .checkAll {
            width: 139px;
            display: flex;
            align-items: center;
            .redOpt {
              display: inline-block;
              width: 20px;
              height: 20px;
              border: 1px solid #eaeaea;
              background: url(../img/agree.png) no-repeat 50%;
              margin: 0px 10px 0px 20px;
            }
            .all {
              font-size: 12px;
            }
          }

          .merchNews {
            width: 300px;
            font-size: 12px;
          }
          .unitPrice {
            width: 180px;
            font-size: 12px;
            text-align: center;
          }
          .amount {
            width: 170px;
            font-size: 12px;
            text-align: center;
          }
          .subtotal {
            width: 150px;
            font-size: 12px;
            text-align: right;
            padding-right: 30px;
          }
          .operation {
            width: 129px;
            font-size: 12px;
            text-align: left;
            padding-left: 31px;
          }
        }
      }
      .redemption {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eaeaea;
        background-color: #fff;
        margin-top: 20px;
        font-size: 14px;
        .promotion {
          width: 92%;
          .promTag {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            color: #fff !important;
            padding: 0 5px;
            font-size: 12px;
            background-color: #e36844;
          }
          .descMid {
            font-size: 14px !important;
            .threShold {
              color: #d52b33;
            }
          }
          .btn {
            width: 66px;
            border: 1px solid #d4282d;
            color: #d4282d;
            margin-right: 20px;
            font-size: 12px;
          }
          .link {
            color: #69c;
          }
        }
      }
      .addGoods {
        width: 100%;
        height: 142px;
        border: 1px solid #eaeaea;
        display: flex;
        align-items: center;
        margin: 10px 0px;
        .addbox {
          width: 100%;
          display: flex;
          align-items: center;
          .itme1 {
            .redOpt {
              display: inline-block;
              width: 20px;
              height: 20px;
              border: 1px solid #999;
              background: url(../img/agree.png) no-repeat 50%;
              margin: 0px 20px 0px 20px;
            }
          }
          .itme2 {
            width: 200px;
            display: flex;
            .itme2Img {
              width: 100px;
              height: 100px;
              background-color: rgb(235, 191, 191);
            }
            .itme2desc {
              width: 100px;
              min-height: 100px;
              padding: 10px 0px 0px 20px;
              text-align: left;
              line-height: 1;
              a {
                color: #333;
                font-size: 14px;
              }
              p {
                font-size: 12px;
                color: #999;
                padding-top: 6px;
              }
            }
          }
          .itme3 {
            width: 260px;
            min-height: 100px;
            padding-top: 20px;
            .price {
              width: 100%;
              display: flex;
              justify-content: flex-end;
            }
          }
          .itme4 {
            width: 258px;
            height: 100px;
            display: flex;
            justify-content: center;
            padding-top: 14px;
            .itme4Box {
              height: 24px;
              display: flex;
              align-items: center;
              border: 1px solid #999;
              .lessC {
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
              }
              .count {
                width: 58px;
                height: 24px;
                border-left: 1px solid #999;
                border-right: 1px solid #999;
                line-height: 24px;
                text-align: center;
              }
              .addC {
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
              }
            }
          }
          .itme5 {
            width: 103px;
            height: 100px;
            padding-top: 18px;
            text-align: right;
            .subTotal {
              color: #d4282d;
            }
          }
          .itme6 {
            padding-left: 36px;
            height: 88px;
            .operate {
              width: 129px;
              padding: 4px 2px;
              a {
                color: #999;
                font-size: 14px;
              }
            }
          }
        }
      }
      .optGoods {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        border: 1px solid #eaeaea;
        background-color: #f5f5f5;
        .optGoodsL {
          width: 70%;
          display: flex;
          align-items: center;
          .left1 {
            display: flex;
            align-items: center;
            .optionAllIcon {
              width: 21px;
              height: 21px;
              margin: 0px 20px;
              border: 1px solid #999;
              background: url(../img/agree.png) no-repeat 50%;
            }
            .optionAll {
              font-size: 12px;
              padding-right: 20px;
            }
          }
          a {
            color: #333;
          }
          .delete {
            padding-right: 30px;
            font-size: 14px;
            &:hover {
              color: #b4a078;
            }
          }
          .empty {
            padding-right: 30px;
            font-size: 14px;
            &:hover {
              color: #b4a078;
            }
          }
          .Left2 {
            width: 166px;
            font-size: 14px;
            margin-left: 115px;
            color: #999;
            .left2Top {
              width: 100%;
              height: 35px;
              line-height: 45px;
              display: flex;
              justify-content: space-between;
            }
            .left2bot {
              width: 100%;
              height: 35px;
              line-height: 25px;
              display: flex;
              justify-content: space-between;
            }
          }
        }
        .optGoodsR {
          width: 40%;
          height: 72px;
          display: flex;
          align-items: center;
          .R1 {
            width: 230px;
            height: 84%;
            border-left: 1px solid #999;
            padding-left: 20px;
            .shoulPay {
              width: 100%;
              .payer {
                font-size: 14px;
              }
              .money {
                margin-left: 20px;
                padding-top: 4px;
                font-size: 22px;
                font-weight: 700;
                color: #be4141;
              }
            }
            .freightTip {
              padding-left: 5px;
              color: #be4141;
              font-size: 14px;
            }
          }
          .orders {
            width: 130px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            border: 1px solid #a59575;
            outline: none;
            background-color: #a59575;
            &:hover {
              cursor: pointer;
              background-color: #c0ae8a;
            }
          }
        }
      }
    }
    .youLike {
      width: 100%;
      .hd {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        padding-top: 40px;
        margin-bottom: 20px;

        .imgWrap {
          display: inline-block;
          width: 60px;
          height: 60px;
          background-color: rgb(219, 182, 182);
        }
        .desc {
          margin-left: 20px;
          font-size: 18px;
        }
      }
      .otherGoods {
        width: 100%;
        overflow: hidden;
        display: flex;
        .otherGoodsbox {
          width: 265px;
          height: 411px;
          margin-left: 10px;
          .othImg {
            width: 100%;
            height: 265px;
            background: url(../img/other11.png) no-repeat 50%;
            background-color: rgb(240, 233, 233);
          }
          .othDesc {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 14px;
            padding-top: 40px;
            .othDesInf {
              color: #333;
              font-weight: 700;
              cursor: pointer;
              &:hover {
                color: #b4a078;
              }
            }
            .othDescP {
              height: 24px;
              line-height: 24px;
              color: #d4282d;
            }
            .othDescS{
                width: 130px;
                padding-top: 10px;
            }
          }
          &:hover{
              background-color: rgb(226, 217, 217);
              box-shadow: 4px 4px 4px rgb(194, 188, 188),
              -4px 4px 4px rgb(194, 188, 188),;
              ;
              ;
          }
        }
      }
    }
  }
}
